<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="character_table.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <title>自动战斗流程JSON生成器</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script src="index.js" type="text/javascript"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <button id="download_json" class="btn btn-primary">下载JSON</button>
        <input type="file" id="json_file" style="display: none;" name="files[]" size=1 />
        <button id="upload_json" class="btn btn-primary">载入JSON</button>
      </div>
    </div><!--JSON-->
    <div class="row">
      <div class="col-12">
        <h1>关卡名</h1>
        <span class="tips">小贴士：填完关卡名后开一局，会在目录下生成 map.png 地图坐标图片</span>
        <input type="text" id="stage_name" class="form-control" placeholder="关卡名，中英文均可">
      </div><!--关卡名-->
      <div class="col-12">
        <h2>标题</h2>
        <input type="text" id="title" class="form-control" placeholder="标题">
      </div><!--标题-->
      <div class="col-12">
        <h2>描述</h2>
        <textarea type="text" class="form-control" id="details" placeholder="作业作者、参考的视频、危机合约要选哪些tag等等"></textarea>
      </div><!--文本-->
      <div class="col-12">
        <h2>群组</h2>
        <div id="groups"></div>
        <button id="groups_new" class="btn btn-primary">添加群组</button>
      </div><!--群组-->
      <div class="col-12">
        <h2>干员</h2>
        <table id="opers" class="table table-bordered table-condensed table-striped">
          <thead>
            <tr>
              <th>干员名字</th>
              <th>技能</th>
              <th>技能用法</th>
              <th></th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
        <button id="opers_new" class="btn btn-primary">新增</button>
      </div><!--干员-->
      <div class="col-12">
        <h2>战斗流程</h2>
        <table id="actions" class="table table-bordered table-condensed table-striped">
          <thead>
            <tr>
              <th>类别</th>
              <th>击杀数</th>              
              <th>干员名字</th>
              <th>x坐标</th>
              <th>y坐标</th>
              <th>方向</th>
              <th>前延迟</th>
              <th>后延迟</th>
              <th></th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
        <button id="actions_new" class="btn btn-primary">新增</button>
      </div>
    </div>
  </div>
  <datalist id="oper_names"></datalist>
</body>

</html>